<!-- 工厂建模标签，进入工厂建模页面。实现工厂建模数据列表显示 CRUD -->
<template>
  <div>
    <h1>工厂建模</h1>
    <el-button type="text" @click="addModel = true">新增</el-button>
    <template>
      <el-table :data="tableData" style="width: 100%" height="1000">
        <el-table-column prop="id" label="编号" width="400" />
        <el-table-column prop="productLineName" label="产品" width="400" />
        <el-table-column
          prop="productLineName"
          label="生产线名称"
          width="400"
        />

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="getUpdateById(scope.row, '编辑')"
              >编辑</el-button
            >

            <el-popconfirm
              confirm-button-text="要删"
              cancel-button-text="不删"
              icon="el-icon-info"
              icon-color="red"
              title="要删除这条数据吗?"
              @confirm="deleteById(scope.row)"
            >
              <el-button size="mini" type="danger" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!--           弹窗            -->
      <div>
        <el-dialog title="添加工厂建模" :visible="addModel" width="60%">
          <div>
            <el-row :gutter="0">
              <el-col :span="3" :offset="1">
                <span style="line-height: 40px"
                  ><span style="color: red">* </span>生产线名称:</span
                >
              </el-col>
              <el-col :span="4" :offset="0">
                <el-input
                  v-model="addFactoryModelingInfo.productionLineName"
                  size="normal"
                  clearable
                />
              </el-col>

              <el-col :span="2" :offset="1">
                <span style="line-height: 40px"
                  ><span style="color: red">* </span>产品:</span
                >
              </el-col>
              <el-col :span="10" :offset="0">
                <el-input
                  disabled
                  style="width: 40%"
                  v-model="select_supplies_info.specification"
                  size="normal"
                  clearable
                />
                <el-button
                  type="text"
                  size="default"
                  @click="openSuppliesDialog()"
                  >选择</el-button
                >
              </el-col>
            </el-row>
            <br />
            <el-row :gutter="5">
              <el-col :span="3" :offset="1">
                <span style="line-height: 40px">产品型号:</span>
              </el-col>
              <el-col :span="4" :offset="0">
                <el-input
                  disabled
                  v-model="select_supplies_info.model"
                  size="normal"
                  clearable
                />
              </el-col>
              <el-col :span="2" :offset="1">
                <span style="line-height: 40px">产品规格:</span>
              </el-col>
              <el-col :span="10" :offset="0">
                <el-input
                  disabled
                  style="width: 40%"
                  v-model="select_supplies_info.model"
                  size="normal"
                  clearable
                />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="22" :offset="1">
                备注:<el-input
                  type="textarea"
                  size="normal"
                  clearable
                ></el-input>
              </el-col>
            </el-row>
            <el-row align-fix="" :gutter="20">
              <el-col :span="22" :offset="1">
                <!-- 订单明细信息 -->
                <el-button type="text" size="default">添加</el-button>
                <el-button type="text" size="default">删除</el-button>
                <el-table style="width: 100%" height="250">
                  <el-table-column prop="" label="物料编码" width="120" />
                  <el-table-column prop="" label="物料名称" width="120" />
                  <el-table-column prop="" label="型号" width="120" />
                  <el-table-column prop="" label="单位" width="120" />
                  <el-table-column prop="" label="单价" />
                </el-table>
              </el-col>
            </el-row>
          </div>
          <span slot="footer">
            <el-button @click="addModel = false">Cancel</el-button>
            <el-button type="primary">OK</el-button>
          </span>
        </el-dialog>

        <!-- 选择客户弹窗 -->
        <!-- <el-dialog title="客户选择" v-model="selectClientDialog" width="40%">
                <div>
                    <el-table @current-change="selectClient" highlight-current-row :data="client_info.info"
                        style="width: 100%" height="200">
                        <el-table-column prop="id" label="编号" width="70" />
                        <el-table-column prop="clientname" label="客户名称" width="120" />
                        <el-table-column prop="companyAddress" label="公司地址" width="120" />
                        <el-table-column prop="contacts" label="联系人" width="120" />
                        <el-table-column prop="contactsinfo" label="联系方式" width="120" />
                        <el-table-column prop="contactsType" label="客户分类" width="200">
                            <template #default="scope">
                                <span v-if="scope.row.contactsType == 1">核心客户</span>
                                <span v-if="scope.row.contactsType == 2">普通客户</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="qualityRating" label="信用等级" />
                    </el-table>
                </div>
                <span slot="footer">
                    <el-button @click="selectClientDialog = false">Cancel</el-button>
                    <el-button type="primary" @click="selectClientDialog = false">OK</el-button>
                </span>
            </el-dialog> -->

        <!-- 选择物料档案 -->
        <el-dialog title="物料档案" :visible="selectSuppliesDialog" width="50%">
          <div>
            <el-row>
              <el-col :span="4" :offset="0">
                <!--  -->
                <el-tree :data="data" @node-click="treeQuery"></el-tree>
              </el-col>
              <el-col :span="18" :offset="0">
                <el-table
                  :data="materialInfo"
                  highlight-current-row
                  @row-click="selectSuppliesList"
                  style="width: 100%"
                  height="200"
                >
                  <el-table-column type="" width="55" />
                  <el-table-column prop="id" label="编号" width="70" />
                  <el-table-column prop="code" label="物料编码" width="120" />
                  <el-table-column prop="name" label="物料名称" width="120" />
                  <el-table-column prop="type" label="类型">
                    <template #default="scope">
                      <span v-if="scope.row.type == 1">成品</span>
                      <span v-if="scope.row.type == 2">原材料</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="model" label="型号" width="120" />
                  <el-table-column prop="unit" label="单位" width="120" />
                  <el-table-column prop="price" label="单价" width="120" />
                </el-table>
              </el-col>
            </el-row>
          </div>
          <span slot="footer">
            <el-button @click="close">Cancel</el-button>
            <el-button @click="selectSuppliesDialog = false" type="primary"
              >OK</el-button
            >
          </span>
        </el-dialog>
      </div>
    </template>

    <div class="block">
      <span class="demonstration">调整每页显示条数</span>
      <el-pagination
        @size-change="findData"
        @current-change="findData"
        :current-page.sync="pageNum"
        :page-sizes="[3, 5, 7, 50]"
        :page-size.sync="pageSize"
        layout="sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { listByPageBylike } from "../../api/manufacturing_execution_mes/Factory_modeling";
import { listByType } from "../../api/wms/wms_material_info";
export default {
  data() {
    return {
      //分页数据
      pageNum: 1,
      pageSize: 3,
      total: 0,
      //工厂建模数据
      tableData: [{}],
      //工厂建模数据模型
      mesFactoryModel: {
        id: "",
        materialId: "",
        productLineName: "",
        remark: "",
      },
      //是否显示弹窗外部弹窗
      addModel: false,
      //是否显示弹窗内部弹窗
      selectSuppliesDialog: false,
      //
      type: 0,
      addFactoryModelingInfo: {},
      select_supplies_info: {},
      materialInfo: [{}],
    };
  },
  methods: {
    openSuppliesDialog() {
      this.selectSuppliesDialog = true;
      listByType(this.type).then((resp) => {
        this.materialInfo = resp.data;
      });
    },
    findData() {
      listByPageBylike(this.pageNum, this.pageSize, this.mesFactoryModel).then(
        (resp) => {
          console.log(resp);
          this.tableData = resp.data.list;
          this.total = resp.data.total;
          this.$message({
            message: "数据已刷新",
            type: "success",
          });
        }
      );
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.findData();
  },
};
</script>

<style></style>